import { Link, useNavigate, Outlet } from "react-router-dom";
import styles from './index.module.scss'
import { getGrammarList } from '@/config'
import { useLocation } from 'react-router-dom'

const demoModules = import.meta.glob('@/common/demos/**/demo*.*', {
  eager: true,
  query: '?raw',
  import: 'default'
})

const grammar: React.FC = () => {
  const navigate = useNavigate();

  const { pathname } = useLocation()
  const currentDemo = Object.fromEntries(
    Object.entries(demoModules)
      .filter(([key]) => key.includes(pathname))
      .map(([key, value]) => [key.replace( new RegExp(`^.*${pathname}/`), ''), value])
  )

  const leftItemClick = (item: { path: string; name: string; }) => {
    const { path } = item
    navigate(path)
  }

  return (<>
    <div className={styles.con}>
      <div className={styles.left}>
        { getGrammarList().map(_ => {
          return (
          <div className={`${styles.leftItem} ba
          ${pathname.includes(_.path) ? styles.leftItemActive : ''}`}
          key={_.path}
          onClick={()=> leftItemClick(_)}>
            {_.name}
          </div>)
        })}
      </div>
      <div className={styles.right}>
        <Outlet context={{curDemos: currentDemo}}/>
      </div>
    </div>
  </>)
}
export default grammar